<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Components</title>
	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
	<link rel="stylesheet" href="assets/css/ready.css">
	<link rel="stylesheet" href="assets/css/demo.css">
</head>
<body>
	<!-- <div class="wrapper">
		<div class="main-header">
			<div class="logo-header">
				<a href="index.html" class="logo">
					Ready Dashboard
				</a>
				<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
			</div>
			<nav class="navbar navbar-header navbar-expand-lg">
				<div class="container-fluid">
					
					<form class="navbar-left navbar-form nav-search mr-md-3" action="">
						<div class="input-group">
							<input type="text" placeholder="Search ..." class="form-control">
							<div class="input-group-append">
								<span class="input-group-text">
									<i class="la la-search search-icon"></i>
								</span>
							</div>
						</div>
					</form>
					<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-envelope"></i>
							</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Something else here</a>
							</div>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="la la-bell"></i>
								<span class="notification">3</span>
							</a>
							<ul class="dropdown-menu notif-box" aria-labelledby="navbarDropdown">
								<li>
									<div class="dropdown-title">You have 4 new notification</div>
								</li>
								<li>
									<div class="notif-center">
										<a href="#">
											<div class="notif-icon notif-primary"> <i class="la la-user-plus"></i> </div>
											<div class="notif-content">
												<span class="block">
													New user registered
												</span>
												<span class="time">5 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-success"> <i class="la la-comment"></i> </div>
											<div class="notif-content">
												<span class="block">
													Rahmad commented on Admin
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-img"> 
												<img src="assets/img/profile2.jpg" alt="Img Profile">
											</div>
											<div class="notif-content">
												<span class="block">
													Reza send messages to you
												</span>
												<span class="time">12 minutes ago</span> 
											</div>
										</a>
										<a href="#">
											<div class="notif-icon notif-danger"> <i class="la la-heart"></i> </div>
											<div class="notif-content">
												<span class="block">
													Farrah liked Admin
												</span>
												<span class="time">17 minutes ago</span> 
											</div>
										</a>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);"> <strong>See all notifications</strong> <i class="la la-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false"> <img src="assets/img/fangzebin.jpg" alt="user-img" width="36" class="img-circle"><span >方泽斌</span></span> </a>
							<ul class="dropdown-menu dropdown-user">
								<li>
									<div class="user-box">
										<div class="u-img"><img src="assets/img/fangzebin.jpg" alt="user"></div>
										<div class="u-text">
											<h4>方泽斌</h4>
											<p class="text-muted">hello@themekita.com</p><a href="一.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a></div>
										</div>
									</li>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/curriculum_vitae/"><i class="ti-user"></i> 我的简历</a>
									<a class="dropdown-item" href="https://fang_se_bin.gitee.io/fangzebin/"></i> 我的博客</a>
									<a class="dropdown-item" href="index.html"><i class="fa fa-power-off"></i> 登出</a>
								</ul>
								<!-- /.dropdown-user -->
							<!-- </li>
						</ul>
					</div>
				</nav>
			</div>
			<div class="sidebar">
				<div class="scrollbar-inner sidebar-wrapper">
					<div class="user">
						<div class="photo">
							<img src="assets/img/fangzebin.jpg">
						</div>
						<div class="info">
							<a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									方泽斌
									<span class="user-level">Administrator</span>
									<span class="caret"></span>
								</span>
							</a>
							<div class="clearfix"></div>

							<div class="collapse in" id="collapseExample" aria-expanded="true" style="">
								<ul class="nav">
									<li>
										<a href="https://fang_se_bin.gitee.io/curriculum_vitae/">
											<span class="link-collapse">我的简历</span>
										</a>
									</li>
									<li>
										<a href="https://fang_se_bin.gitee.io/fangzebin/">
											<span class="link-collapse">我的博客</span>
										</a>
									</li>
									<li>
										<a href="index.html">
											<span class="link-collapse">登出</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<ul class="nav">
						<li class="nav-item">
							<a href="一.html">
								<i class="la la-dashboard"></i>
								<p>数据总故事</p>
								<span class="badge badge-count">5</span>
							</a>
						</li>
						<li class="nav-item active">
							<a href="二.html">
								<i class="la la-table"></i>
								<p>年末常住人口</p>
								<span class="badge badge-count">14</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="三.html">
								<i class="la la-keyboard-o"></i>
								<p>出生率与死亡率</p>
								<span class="badge badge-count">50</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="四.html">
								<i class="la la-th"></i>
								<p>平均年工资</p>
								<span class="badge badge-count">6</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="五.html">
								<i class="la la-bell"></i>
								<p>自然灾害</p>
								<span class="badge badge-success">3</span>
							</a>
						</li>
						<li class="nav-item">
							<a href="六.html">
								<i class="la la-font"></i>
								<p>总结与建议</p>
								<span class="badge badge-danger">25</span>
							</a>
                        </li>
                        <li class="nav-item update-pro">
							<button  data-toggle="modal" data-target="#modalUpdate">
								<i class="la la-hand-pointer-o"></i>
                                <p>Update to pro</p>
							</button>
						</li>
						<li class="nav-item">
							<a href="https://gitee.com/fang_se_bin/python-final-project">
								<i class="la la-fonticons"></i>
								<p>技术文档</p>
							</a>
                        </li>
                        <li class="nav-item">
							<a href="https://data.stats.gov.cn/index.htm">
								<i class="la la-fonticons"></i>
								<p>数据来源</p>
							</a>
						</li>
						
					</ul>
				</div>
			</div> -->
			<!-- <div class="main-panel">
				<div class="content">
					<div class="container-fluid">
						<span id="stats_traffic" class="h2 font-weight-bold mb-0"></span>
                    </div> -->
                    <p class="mt-3 mb-0 text-muted text-sm">
                    </p> 
                  <!-- Page content -->
      <div class="container-fluid mt--0">
        <div class="row">
          <div class="col-xl-0 mb-0 mb-xl-0">
            <div class="card shadow">

              <div class="card-body">
  
  
                <div style="height: 100%;width: 200%">
					<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="7969df6377504df2bdc18a71ad17f720" class="chart-container" style="width:1000px; height:500px;"></div>
    <script>
        var chart_7969df6377504df2bdc18a71ad17f720 = echarts.init(
            document.getElementById('7969df6377504df2bdc18a71ad17f720'), 'white', {renderer: 'canvas'});
        var option_7969df6377504df2bdc18a71ad17f720 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "funnel",
            "data": [
                {
                    "name": "\u533b\u7597\u8d39",
                    "value": 59.5
                },
                {
                    "name": "\u5927\u75c5\u672a\u53ca\u65f6\u53d1\u73b0\u6cbb\u7597",
                    "value": 48.7
                },
                {
                    "name": "\u7f3a\u4e4f\u62a4\u7406\u3001\u6cbb\u7597",
                    "value": 29.3
                },
                {
                    "name": "\u65e5\u5e38\u751f\u6d3b\u56f0\u96be",
                    "value": 20.9
                },
                {
                    "name": "\u4eb2\u4eba\u56e2\u805a\u5c11",
                    "value": 19.6
                },
                {
                    "name": "\u793e\u4ea4\u4eba\u60c5\u51b7\u843d",
                    "value": 14.3
                }
            ],
            "sort": "descending",
            "gap": 2,
            "label": {
                "show": true,
                "position": "inside",
                "margin": 8
            },
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "showContent": true,
                "alwaysShowContent": false,
                "showDelay": 0,
                "hideDelay": 100,
                "formatter": "{a} <br/>{b} : {c}%",
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0,
                "padding": 5
            },
            "itemStyle": {
                "borderColor": "#fff",
                "borderWidth": 1
            }
        }
    ],
    "legend": [
        {
            "data": [
                "\u793e\u4ea4\u4eba\u60c5\u51b7\u843d",
                "\u65e5\u5e38\u751f\u6d3b\u56f0\u96be",
                "\u7f3a\u4e4f\u62a4\u7406\u3001\u6cbb\u7597",
                "\u533b\u7597\u8d39",
                "\u5927\u75c5\u672a\u53ca\u65f6\u53d1\u73b0\u6cbb\u7597",
                "\u4eb2\u4eba\u56e2\u805a\u5c11"
            ],
            "selected": {
                "\u533b\u7597\u8d39": true,
                "\u5927\u75c5\u672a\u53ca\u65f6\u53d1\u73b0\u6cbb\u7597": true,
                "\u7f3a\u4e4f\u62a4\u7406\u3001\u6cbb\u7597": true,
                "\u65e5\u5e38\u751f\u6d3b\u56f0\u96be": true,
                "\u4eb2\u4eba\u56e2\u805a\u5c11": true,
                "\u793e\u4ea4\u4eba\u60c5\u51b7\u843d": true
            },
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5
    },
    "title": [
        {
            "text": "\u517b\u8001\u62c5\u5fe7\u7684\u95ee\u9898",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_7969df6377504df2bdc18a71ad17f720.setOption(option_7969df6377504df2bdc18a71ad17f720);
    </script>
</body>
</html>

					
					
					

</div>
</div>
</div>
</div>
<div class="col-xl-4">
	<div class="card shadow">
	  <div class="card-header bg-transparent">
		<div class="row align-items-center">
		  <div class="col">
			<h3>数据介绍：</h3>
			<!-- <h2 class="mb-0">养老服务价格</h2> -->
		  </div>
		</div>
	  </div>
	  <div class="card-body">
		<!-- Chart -->
		<div style="height: 100%;width: 100%">
		  <h4>2019年</h4>
		  <h4>养老担忧问题占比</h4>
		  <p> 1.从漏斗图中我们可以看到，老年人养老最担忧的问题还是自己的身体问题，治疗自己身体的医疗费用占比排在第一，占比59.5%</p>
		  <p>2.在漏斗图的末端我们可以看到，在老年养老阶段，重视自己的身体状况远远比重视人情冷暖要强，老年社交已经不是成为老年人重视的方面了</p>
		<!-- </div>
	  </div>
	</div>
  </div>
</div> -->
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script>
	$( function() {
		$( "#slider" ).slider({
			range: "min",
			max: 100,
			value: 40,
		});
		$( "#slider-range" ).slider({
			range: true,
			min: 0,
			max: 500,
			values: [ 75, 300 ]
		});
	} );
</script>
</html>